<template>
  <el-row>
    <el-col :span="24"
            class="header-img-box">
      <img :src="imgUrl"
           alt="">
    </el-col>
    <el-col :span="24"
            class="qrcode-style">
      <div id="login_container">
      </div>
    </el-col>
    <el-col :span="24"
            class="bottom-style">
      <span @click="onLogin">去登录</span> <span @click="onRegister">立即注册</span>
    </el-col>
  </el-row>
</template>

<script>
import QRCode from 'qrcodejs2';
import { MyCompanyApi } from '@/services/WorkBench';
export default {
  name: "qrCode",
  props: {
    typeVal: Number,
    closeScanDialog: Function
  },
  data () {
    return {
      objVal: {},
      imgUrl: 'https://d1icd6shlvmxi6.cloudfront.net/gsc/WLFD7C/8c/f0/ab/8cf0ab3558544c0db097fbddb988dceb/images/登录-注册/u91.png?token=b18a0c9e87c37805f69d89a8bdfd223266763fae08402bd1586babf668d17e92'
    }
  },
  methods: {
    setWxerwma () {
      // JUMP_TO_BIND_PAGE: "'http://plat.hibuilding.cn/'",//跳转到帐号绑定页面-平台入驻v1.7.0
      //生成微信登录码
      this.objVal = new WxLogin({
        self_redirect: true,//ture：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
        id: 'login_container', // 需要显示的容器id
        // appid: 'wxef5765dd395d8504', // 公众号appid wx*******
        // appid: 'wxb72a08d57f0ba90b',
        appid: 'wxa35ac801c05cf0fc',//2022-05-23更新
        scope: 'snsapi_login', // 网页默认即可
        redirect_uri: encodeURIComponent(process.env.JUMP_TO_BIND_PAGE + 'blankPage'),//编码后：http%3A%2F%2Fplat.hibuilding.cn%2FblankPage
        style: 'black', // 提供"black"、"white"可选。二维码的样式
        href: 'https://static.zcool.cn/passport4.0/css/wxCode.css?v=0.1' // 外部css文件url，需要https
      });
      console.log('生成微微信登录码=', encodeURIComponent(process.env.JUMP_TO_BIND_PAGE + 'blankPage'))
    },
    onRegister () {//立即注册
      this.closeScanDialog(2)
    },
    onLogin () {//去登录
      this.closeScanDialog(1)
    },
  },
  watch: {
    typeVal (n, o) {
      if (n == 1) {
        this.$nextTick(() => {
          this.setWxerwma();
        })
      }
      console.log('w-typeVal=', n)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.setWxerwma();
    });
  },
  created () {
  }
}
</script>
<style lang="scss" scoped>
#login_container {
  height: 260px;
}
.tip-style {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 20px;
  span {
    color: #1890ff;
  }
}
.bottom-style {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  span {
    cursor: pointer;
  }
  span:hover {
    color: #1890ff;
  }
}
.qrcode-style {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.header-img-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 40px;
}
/deep/ .header-img-box {
  margin: 0px;
}
</style>